<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'

import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted } from 'vue'

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])

var chartDom = ref(null)

var option

const userStore = useUserStore()
const user = userStore.user

const data = ref([0.5, 1, 2, 1, 2, 0.9, 1])

if (user.id === 1) {
  data.value = [1.2, 2.3, 2.5, 2, 1.5, 0.9, 2.3]
} else if (user.id === 2) {
  data.value = [0.3, 0.2, 0.3, 0.5, 0.4, 0.9, 1]
} else if (user.id === 3) {
  data.value = [1.5, 1, 2, 1.6, 2, 0.9, 1.2]
}

const startChar = () => {
  var myChart = echarts.init(chartDom.value)
  option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      formatter: (a) => {
        if (a[0].value < 1) {
          return `${a[0].seriesName}:${a[0].value * 60}分钟`
        } else {
          return `${a[0].seriesName}:${a[0].value}小时`
        }
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['学习时间']
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          show: true,
          interval: 'auto',
          formatter: '{value}'
        },
        max: (value) => {
          return value.max + 0.5
        }
      }
    ],
    series: [
      {
        name: '学习时间',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: data.value
      }
    ]
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  try {
    startChar()
  } catch {
    console.log('图表加载失败')
  }
})
</script>
<template>
  <div v-if="user.name">
    <div ref="chartDom" class="char"></div>
    <!-- 其他区域 -->
    <div class="footer">
      <div class="tips">
        <span>AI会根据您每天学习时间来给您推送还需学习多久</span>
      </div>
    </div>
  </div>

  <van-empty v-else description="未登录">
    <van-button
      round
      type="primary"
      @click="$router.push('/login')"
      class="bottom-button"
      >开启升本单词之旅</van-button
    >
  </van-empty>
</template>
<style lang="less" scoped>
.char {
  width: 100%;
  height: 68vh;
  margin-top: 20px;
}
.footer .tips {
  margin: auto;
  margin-top: 1.5vh;
  border-radius: 10px;
  width: 98%;
  height: 7vh;
  background: #d4d1d1;
  span {
    display: block;
    padding: 2vh;
    font-size: 2vh;
  }
}
</style>
